<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="action"
      :headers="{ token: token }"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="beforeUpload"
      name="file"
    >

       <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
// import { getToken } from "@/tools/users";

import { getToken } from "@/utils/auth"; // 验权

export default {
  name: "picUpload",
  props: {
    value: {
      type: String,
      default() {
        return "";
      }
    },
    action: {
      type: String,
      default() {
        return `${this.uploadUrl}/file/upload`;
      }
    },
    placeholder: {
      type: String,
      default() {
        return "上传照片";
      }
    },
    tip: {
      type: String,
      default() {
        return "仅支持 .png 格式，建议采用透明背景、长宽相等的图片以保证用户端正常显示，图片大小不能超过1mb";
      }
    },
    isShowTip: {
      type: Boolean,
      default() {
        return true;
      }
    },
    url: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      uploadUrl: `https://mini.qdkcompressor.com/adviser/sys`,
      token: getToken(),
      imageUrl: '',
      loading: false
    };
  },
  watch: {
    url: {
      handler(val) {
       if (val) {
        this.imageUrl = this.uploadUrl + "/img/preview/" + val;
      }
      },
      deep: true,
      immediate: true,
      
    },
    value(val) {
      if (!val) {
        this.imageUrl = "";
      }
    }
  },
  methods: {
    handleUploadSuccess(res) {
      if (res && res.code === 200) {
        this.imageUrl = this.uploadUrl + "/img/preview/" + res.data;
        this.$message.success("上传图片成功");
        this.$emit("input", res.data);
        // this.$emit("on-success", res, res.data);
        this.$emit("on-success", res.data);
      } else {
        this.$message.error((res && res.message) || "上传图片失败");
      }
      this.loading = false;
    },
    handleUploadError(err, file, fileList) {
      this.loading = false;
      this.$emit("on-error", err, file, fileList);
      this.$message.error("上传失败");
    },
    checkImage(file) {
      //   const isValid = false;
      //   const isImage = file.type === "image/png";
      //   if (!isImage) {
      //     this.$message.error("只能上传 png 类型的图片!");
      //     return isValid;
      //   }
      //   const isLt5M = file.size / 1024 / 1024 < 1;
      //   if (!isLt5M) {
      //     this.$message.error("图片大小不能超过 1MB!");
      //     return isValid;
      //   }
      //   return !isValid;
    },
    beforeUpload(file) {
      this.loading = true;
      const isValid = this.checkImage(file);
      if (!isValid) {
        this.loading = false;
      } else {
        this.imageUrl = "";
      }
      return isValid;
    }
  }
};
</script>

<style scoped>
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 14px;
  color: #3a8ee6;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.el-upload__tip {
  margin-top: -6px;
  line-height: 1.5;
  color: #c4c8cf;
}

.avatar-uploader-icon /deep/ .el-loading-spinner {
  top: 0;
  margin-top: 15px;
}
</style>
